<template>
    <template v-if="TreeArray">
        <template v-for="rootItem in TreeArray" :key="rootItem.id">
            <div  class="rootMenu no-copy"
                :style="{backgroundColor:rootItemColor}"
                :class="{'rootMenu-active':CardActive===rootItem.id}"
                @mouseenter="CardActive=rootItem.id"
                @mouseleave="CardActive= -1"
                >
                <span>{{ rootItem.name }}</span>
                <template v-if="rootItem.children.length!==0">
                    <transition name="childCardAni">
                        <div class="childrenCard " v-show="CardActive===rootItem.id">
                            
                            <template v-for="secondItem in rootItem.children" :key="secondItem.id">
                                <template v-if="secondItem.children.length!==0">
                                        <div class="childrenCardItem"
                                    @click="menuClick(secondItem.id)"
                                >
                                    <span>{{ secondItem.name }}</span>
                                    <el-icon class="MenuIcon" :class="{'iconTurn':childCardActive===secondItem.id}"><ArrowDown /></el-icon>

                                </div>
                                    
                                        <template v-for="thirdItem in secondItem.children" :key="thirdItem.id">
                                            <transition name="childrenCardItemAni">
                                                <div class="childrenCardItemChild" 
                                                    v-show="childCardActive===secondItem.id"
                                                    @click="itemClick(thirdItem.id)">
                                                    <span>{{ thirdItem.name }}</span>
                                                </div>
                                            </transition>
                                        </template>
                                    
                                </template>
                                    <template v-else>
                                        <div class="childrenCardItem"
                                        @click="itemClick(secondItem.id)"
                                    >
                                        <span>{{ secondItem.name }}</span>

                                    </div>
                                </template>
                                
                                    
                            </template>
                            
                            
                        </div>
                    </transition>
                        
                      
                </template>
            </div>
                
        </template>
    </template>
</template>

<script lang="ts" setup>
import {ref} from 'vue';

 
interface cateTree{
    id:number;
    name:String;
    children:cateTree[];
}

const props=withDefaults(defineProps<{
    TreeArray:cateTree[];
    rootItemColor?:string;
}>(),{
    rootItemColor:'rgba(0,0,0,0)'
})

const CardActive=ref(-1);
const childCardActive=ref(-1);
const itemOpened=ref(-1);


const menuClick = function ( menuId:number ){
    if(menuId!==childCardActive.value){
        childCardActive.value=menuId;
    }
    else{
        childCardActive.value=-1
    }
}


const itemClick = function (itemId:number){
    if(itemId!==itemOpened.value){
        itemOpened.value=itemId;
    }
}


</script>

<style>

.MenuIcon{
    transition: all 0.5s ease;
    transform: rotate(180deg);
}

.iconTurn{
    transform: rotate(360deg);
}

.no-copy {
  /* 禁止文本选择（兼容各浏览器） */
  -webkit-user-select: none; /* Safari、Chrome 等 */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE、Edge */
  user-select: none; /* 标准语法 */
  
}

.rootMenu{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.rootMenu-active{
    border-bottom: 2px solid rgb(0, 200, 255);
    color: aqua;
    
}



.childrenCard{
    position: absolute;
    font-size: 90%;
    top: 100%;
    left: -10%;
    width: 200%;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 3px;
    border-left: 1px solid rgba(255, 255, 255, 0.833);
    max-height: 500;
    color: rgb(255, 255, 255);

}

.childrenCardItem{
    width: 100%;
    padding: 5px;
    color: rgb(255, 255, 255);
    transition: all 0.4s ease;
    display: flex;
    gap: 10px;
    align-items: center;
}

.childrenCardItem:hover{
    color: rgb(0, 217, 255);
}

.childrenCardItemChild{
    width: 90%;
    padding: 5px;
    font-size: 80%;
    margin-left: 15%;
}

.childrenCardItemChild:hover{
    
    color: rgb(0, 217, 255);

}


.childCardAni-enter-active,
.childCardAni-leave-active
{   
    max-height: 400px;
    transition: all 0.3s ease;
}

.childCardAni-enter-from,
.childCardAni-leave-to{
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    
}



.childrenCardItemAni-enter-active,
.childrenCardItemAni-leave-active
{
    transition: all 0.3s ease;
    max-height: 400px;
}

.childrenCardItemAni-enter-from,
.childrenCardItemAni-leave-to{
    opacity: 0;
    visibility: hidden;
    max-height: 0;
}

</style>
